
<template>
  <div >

    <Modal
      v-model="showBox"
      title="商标分类查询"
      :footer-hide="true"
      :mask-closable="false"
      @on-visible-change="vChange"
      width="500"
      class="zZXx"
    > 
      
      <div style="margin:-16px;">

        <div
          class="paddingLi bgWhite overflowH"
          style="border-bottom:1px solid #ccc;height:55px;"
        >
          <Input v-model="otTk" placeholder="请输入 商品/服务 名称进行查询" @on-search="onEnterV" @on-change="onChangeV"  search enter-button />
        </div>

        <div class="xBox paddingLi lineH2" id="xBoxSearch">
          <!-- 默认45类 -->
          <template v-if="fenS">
            <template v-for="(val,i) in cglist">
              <div class="f_16 textLink" @click="b1(val)">
                <Icon
                  :type="$app.judgeData(val.check)?'ios-arrow-down':'ios-arrow-forward'"
                  class="relative"
                />
                <span
                  :class="($app.judgeData(val.check)?' f_bold':'') +' '+ ($app.judgeData(val.editList)?' cBlue':'') "
                >第{{val.fcgnum}}类 - {{val.fcgname}}</span>
              </div>

              <div v-show="$app.judgeData(val.check)">
                <template v-for="(jar,r) in val.items">
                  <div class="paddingL20">
                    <div
                      class="textLink txtOneLine"
                      @click="b2(jar)"
                    >
                      <Icon
                        :type="$app.judgeData(jar.check)?'ios-arrow-down':'ios-arrow-forward'"
                        class="relative"
                      />
                      <span
                        :class="($app.judgeData(jar.check)?' f_bold':'')"
                      >{{jar.fcgnum}}-{{jar.fcgname}}</span>
                    </div>
                    <div v-show="$app.judgeData(jar.check)">
                      <template v-for="(kao,k) in jar.items">
                        <div class="paddingL20  txtOneLine zN45">
                          <div>{{kao.fcgnum}}{{$app.judgeData(kao.fcgnum)?'-':''}}{{kao.fcgname}}</div>
                        </div>
                      </template>
                    </div>
                    
                  </div>
                </template>
              </div>
              
            </template>

          </template>
          <!-- 45类 搜索栏 -->
          <template v-else>
            <div class="textCenter cCCC f_20" style="line-height:4;" v-show="!$app.judgeData(cglistSearch)">
              <Icon type="ios-information-circle-outline" size="24" class="relative"  />
              暂无数据
            </div>
            <template v-for="(val,i) in cglistSearch" >
              <div class="f_16 textLink" @click="b1(val)">
                <Icon
                  :type="$app.judgeData(val.check)?'ios-arrow-down':'ios-arrow-forward'"
                  class="relative"
                />
                <span
                  :class="($app.judgeData(val.check)?' f_bold':'') +' '+(($app.judgeData(val.good))?' f_bold c333':'')"
                >第{{val.fcgnum}}类 - {{val.fcgname}}</span>
              </div>
              <div v-show="$app.judgeData(val.check)">
                <template v-for="(jar,r) in val.items">
                  <div class="paddingL20">
                    <div
                      class="textLink txtOneLine"
                      @click="b2(jar)"
                    >
                      <Icon
                        :type="$app.judgeData(jar.check)?'ios-arrow-down':'ios-arrow-forward'"
                        class="relative"
                      />
                      <span
                        :class="($app.judgeData(jar.check)?' f_bold':'')+' '+(($app.judgeData(jar.good))?' f_bold c333':'')"
                      >{{jar.fcgnum}}-{{jar.fcgname}}</span>
                    </div>
                    <div
                      class="paddingL20  txtOneLine zN45"
                      v-for="(kao,k) in jar.items"
                      :key="'F'+k"
                      v-show="$app.judgeData(jar.check)"
                    >
                      <div
                        :class="($app.judgeData(kao.good)?' cBlue f_bold':'') "
                      >{{kao.fcgnum}}{{$app.judgeData(kao.fcgnum)?'-':''}}{{kao.fcgname}}</div>
                    </div>
                    <div class="moreJ textLink" @click="ck1_and_2(jar,2)" v-show="!$app.judgeData(jar.allLai) && $app.judgeData(jar.check)">查看更多 ...</div>
                  </div>
                </template>
              </div>
              <div class="moreJ textLink" @click="ck1_and_2(val,1)" v-show="!$app.judgeData(val.allLai) && $app.judgeData(val.check)">查看更多 ...</div>
            </template>
          </template>

        </div>

      </div>
      
    </Modal>
  </div>
</template>

<style scoped>
.zZXx .xBox {
  height: 445px;
  overflow: auto;
}
.zZXx .moreJ{
  border-bottom: dashed 1px #ccc;
  padding-left: 20px;
  margin-bottom: 10px;
  color:#aaa;
  font-size: 12px;
}
</style>

<script>
export default {
  name: "fenL45",
  components: {},
  data() {
    let data = {

      /**
       * cglist.items.参数如下
       *    good=> 搜索命中
       *    check=> 用这个参数，判断展开哪一个？手机+PC共同合适用
       * 			这个参牛逼了，一级，二级展开，都靠他判断
       *      用户主动点点+搜索，都是靠这个参数=》展开
       *    active => 已经选中 (新方法升级，这个参数，已经不用了)
       *    disabled => 禁止选（只用担保注册会用到）
       * 第三级的fcgparent 与 第二级的fcgid 相等，二级与一级同理
       * cglist 第一级，自己手动加多了一个 editList:[] 方便处理
       * 一级，二级，一定有fcgnum；第三级，不一定
       **/
      cglist: [], //45栏目
    };

    let tool = {
      showBox: false,// 弹框是否显示
    };

    let searchData={
      fenS: true, //true常规45类; false搜索栏
      otTk: "",//输入框
      HotTk:"",//输入框搜索的值
      
      cglistSearch: [],//左边栏搜索回来的结果
    };
    return Object.assign(data, tool,searchData);

  },
  created(){
    this.b0_Z();
  },
  mounted(){},
  methods: {
    // 万物归零
    b0_Z(){
      this.cglist=[];//清空数据 45栏目
      this.b0();
    },
    // 永远的第一次
    b0(callBack){
      $ajax.mGlistAll({//一切从零开始
        fcgparent: 0
      },resData => {
        if($app.judgeData(this.cglist)){
          //已经有值，不重新操作，否则会清空掉，原来命中的值
        }else{
          this.$set(this, "cglist", resData);//赋值
        }

        
        callBack instanceof Function && callBack();
      });
    },
    //45类点击 第1层
    b1(val){
      if(val.check){//数据已经有了不做重新请求=》更加快
        this.$set(val, "check", false); //已经展开 点击缩起
      }else{
        if ($app.judgeData(val.items)) {
          this.$set(val, "check", true); //已经展开 点击缩起
        }else{
          $ajax.mGlistAll({
            fcgparent: val.fcgid
          }, resDaP => {
            this.$set(val, "items", resDaP);
            this.$set(val, "check", true);
          });
        }
      }
    },

    //45类点击 第2层
    b2(jar) {
      if(jar.check){//数据已经有了不做重新请求=》更加快
        this.$set(jar, "check", false); //已经展开 点击缩起
      }else{
        if ($app.judgeData(jar.items)) {
          this.$set(jar, "check", true); //已经展开 点击缩起
        }else{
          let obj = {
            fcgparent: jar.fcgid
          };
          $ajax.mGlistAll(obj, resDaP => {
            this.$set(jar, "items", resDaP);
            this.$set(jar, "check", true);
          });
        }
      }
    },

    //搜索框 操作
    onEnterV(){
      let { 
        otTk //输入框
      } = this;
      let jt = $app.delSpace(otTk);
      
      if ($app.judgeData(jt)) {
        // 搜索搜索框的数据
        $ajax.searchTmType({keys:otTk}, resDataA => {

          if($app.judgeData(resDataA)){//有数据
          
            let pU=[];
            //获取子集匹配中的数组
            (resDataA).forEach((poe,p)=>{
              pU.push(poe.fcgid);
            });

            // 历史悠久，原理，忘干了
            $ajax.mGlistAll({
              fcgids:JSON.stringify(pU),
              fcgparent:0,
              keys:otTk
            },resDataB => {
              document.getElementById('xBoxSearch').scrollTo(0,0); //滚动回顶部
              
              this.fenS = false;
              this.HotTk=this.otTk;

              resDataB.forEach((rpw,r)=>{
                rpw.allLai=true;//隐藏，查看更多
              });

              let newList=[...resDataA,...resDataB];//数组重构
              this.$set(this, "cglistSearch", newList);

            });

          }else{//无数据
            this.$Message.error({content:'暂无匹配数据'});
            this.fenSNoDD();//清空数据
          }
        });
      }else{
        this.fenSNoDD();//清空数据
      }

    },

    //监听输入框
    onChangeV(){
      let { 
        otTk,
        fenS
      } = this;
      
      if (!$app.judgeData($app.delSpace(otTk))) {
        
          if(!fenS){
            //清空数据
            this.fenSNoDD(()=>{
              this.b0();//清空原本的数据
            });
          }
        
      }else{
        
      }
    },

    //清空数据
    fenSNoDD(callBack){//搜索框结果，没数据处理
      document.getElementById('xBoxSearch').scrollTo(0,0); //滚动回顶部
      this.fenS = true;
      this.HotTk='';
      this.cglistSearch = []; //清空数据
      callBack instanceof Function && callBack();
    },
    //查看更多 ji: 第1级 第2级
    ck1_and_2(jTv,ji){

      let {HotTk}=this;

      let pU=[];
      //获取子集匹配中的数组
      (jTv.items).forEach((poe,p)=>{
        pU.push(poe.fcgid);
      });

      $ajax.mGlistAll({
        fcgids:JSON.stringify(pU),
        fcgparent: jTv.fcgid,
        keys:HotTk
      }, resData => {
        jTv.allLai=true;//隐藏，查看更多
        jTv.check=true;

        // 只对第1级处理
        if(ji==1){
          resData.forEach((yua,y)=>{
            yua.allLai=true;//子集的，查看更多 ，隐藏
          });
        }
        
        let newList=[...jTv.items,...resData];//数组重构
        this.$set(jTv, "items", newList);
      });
    },

    //弹框消失
    vChange(buEr) {
      if(!buEr){//弹框隐藏
      }else{//显示
      }
    }

  }
};
</script>

<style>
</style>
